 IE display problems with dropdown menu |
  |
| relic180 |
 Oct 8 2009, 09:01 AM
Post
#1
|
|
Newbie  Group: Members Posts: 15 Joined: 6-June 09 Member No.: 8,818  |
I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE.
I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: CODE /* horizontal drop down navbar - basic formatting */ #centering_wrap {width:100%; position:relative;} #menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */ #menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */ #menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */ #menu ul li{ background-position:bottom left;} /* set nav bg position */ #menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */ /* Positioning popouts (2nd level only) */ #menu li {position: relative;} /* make "ABSOLUTE" work correctly */ #menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */ #menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */ /* Hover behavior */ div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} /* Additional text formatting */ #menu a {display: block;width: 100%;height: 100%;} #menu ul ul li { font: bold 11px/16px arial, helvetica, sans-serif; border-width: 0px 1px 1px 1px; border-style: solid; border-color: #ccc #323E6B #456594 #323E6B; margin: 0; padding: 3px 4px; background: #2B3344; } #menu ul ul a {color: #CCC;text-decoration: none;} #menu ul ul a:hover {color: #FFF;background:#06F;} ...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): CODE <div id="centering_wrap"> <div id="menu"> <ul style="width:195px;"> <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a> <ul> <li><a href="http://www.skullcrow.com/">Storefront</a></li> <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a> <ul> <li><a href="http://www.skullcrow.com/">Shirts</a></li> <li>Hats</li> <li>Stickers</li> <li>Misc Stuff</li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a> <ul> <li><a href="http://www.skullcrow.com/forum">Forum</a></li> <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li> <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li> <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a> <ul> <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li> <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li> <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li> </ul> </li> </ul> <ul style="width:196px;"> <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li> </ul> </div> </div> ...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: CODE <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(css/csshover3.htc); font-size: 100%; } #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is here: http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a *beep* and I think most web developers would probably agree. Thanks again. |
  |
 
|
| relic180 |
Oct 9 2009, 09:22 AM
Post
#2
|
|
Newbie Group: Members Posts: 15 Joined: 6-June 09 Member No.: 8,818 |
Ok, so I was able to fix most of the problem by making the following changes:
CODE #menu ul li{ height:42px; background-position:bottom left;} /* set nav bg position */ #menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */ #menu ul li li{ height:auto;} The width of the dropdowns are still not showing up correctly in IE and the font size of the links in the dropdown are showing up smaller than they're suppose to (Although non-link text seems to size correctly). Any help with these 2 things? |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 2nd May 2024 - 08:47 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC